<!-- 张数选择器 -->
<template>
  <div class="slider-index">
    <div class="amount-slider">
      <div class="amount-slider-clickable flex justify-center pr-4">
        <vue-slider @change="sliderAmountChange" class="mainBox" :marks="marks" v-model="sliderAmount" :hide-label="true"
          width="94%" tooltip="hover" :tooltip-formatter="'{value}%'"
          :railStyle="{ background: '#404040', height: '2px' }" :processStyle="{ background: '#266BFF', height: '2px' }">
          <template v-slot:step="{ active }">
            <div :class="['custom-step', { active }]"></div>
          </template>
        </vue-slider>
      </div>
      <div class="textColor flex justify-between mt-10">
        <span>0%</span>
        <span class="lins">25%</span>
        <span class="lins">50%</span>
        <span class="lins">75%</span>
        <span class="lins">100%</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import VueSlider from "vue-slider-component";

export default {
  name: "amountSlider",
  components: {
    VueSlider,
  },
  props: {
    maxAmount: {
      type: Number,
      default: 0, //可开或者可平的总数
    },
  },
  data() {
    return {
      amount: undefined, //用户输入的张数
      sliderAmount: "", //滑块的数量
      marks: (val) => val % 25 === 0,
    };
  },
  computed: {
    ...mapGetters(["existToken"]),
  },
  methods: {
    //输入框事件
    inputChange(val) {
      this.$emit("getAmount", val);
    },
    // 清除输入框
    cleanAmount() {
      this.amount = undefined;
    },
    //滑块事件
    sliderAmountChange(val) {
      console.log("滑块的值", val, this.maxAmount);
      let data;
      if (this.maxAmount) {
        if (val == 0) {
          this.amount = undefined;
        } else {
          const rate = val / 100; //如0.25
          data = this.maxAmount * rate;
          this.amount = parseInt(data);
        }
        this.$emit("getAmount", this.amount);
      }
    },
    //输入框amount变化
    amountChange(amount) {
      this.sliderAmount = ((amount / this.maxAmount) * 100).toFixed(2);
    },
    emptyValue() {
      this.sliderAmount = "";
    },
  },
};
</script>
<style scoped>
/* 滑块 */
.mainBox>>>.vue-slider-dot-tooltip-inner {
  background: #404040 !important;
  color: #fafafa !important;
}

.mainBox>>>.vue-slider-dot-tooltip-inner-top::after {
  display: none;
}

.mainBox>>>.vue-slider-marks {
  background: #f3f3f3;
}

.mainBox>>>.custom-step {
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* 没有选中时候圈圈的颜色 */
  background: #ffffff;
  border: 1px solid #dddddd;
}

.custom-step.active {
  box-shadow: 0 0 0 3px #1D91FF;
  background-color: #1D91FF;
}

.poecs {
  margin-top: 16px;
  color: #fff;
}

.poecs span.lins {
  display: inline-block;
  width: 22%;
  text-align: right;
}
</style>
